<template>
  <div>
    <el-row>
      <el-switch
          v-model="flag"
          active-text="收入"
          active-value="1"
          inactive-text="支出"
          inactive-value="2"
          @change="getFlag($event)"
      >
      </el-switch>
        <el-input placeholder="名称" v-model="input" style="width: 15em"/>
          <el-button @click="insert(input)">添加</el-button>
    </el-row>

    <el-table
        :data="kindDatas"
        stripe
        border
        style="width: 50%" >
      <el-table-column
          prop="kindName"
          label="名称"
          width="full">
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
          width="150">
        <template slot-scope="scope">
          <i class="el-icon-edit" @click="update(scope.row)"></i>
          &nbsp;&nbsp;&nbsp;

          <template>
            <el-popconfirm
                confirm-button-text="确定"
                @confirm="deleteById(scope.row)"
                cancel-button-text="算了算了"
                title="确定删除？可能造成无法挽回的错误"
            >
              <i class="el-icon-delete" slot="reference" ></i>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "Kind",
  methods:{
    insert(name){
      const _this=this;
      let flag=this.getflag;
      axios.get('http://localhost:9090/kind/insert/'+flag+'/'+name).then(function (resp){
        console.log(resp.data)
      })
      _this.getFlag(flag)
    },
    getFlag(value){
      const _this=this;
      _this.getflag=value;
      _this.kindDatas=[];
      axios.get('http://localhost:9090/kind/findAll/'+value).then(function (resp){
        let jsonObj = JSON.parse(JSON.stringify(resp.data));
        _this.kindDatas=resp.data;
      })
    },
    update(row){
      this.$prompt('修改后的名字', '修改', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue:row.kindName,
        center:true
      }).then(({ value }) => {
        this.updateRow(row,value),
        this.$message({
          type: 'success',
          message: value+"   修改成功"
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    updateRow(row,name){
      let data=row;
      data.kindName=name;
      axios({
        url: "http://localhost:9090/kind/update",
        data: data,
        method:'post',
        //ajax
        // dataType: "JSON",
        // type: "post",
        // contentType: ‘application/json;charset=UTF-8‘, //不能加
        // success: function (msg) {
        //   console.log(msg)
        // }
      })
          .then(function (resp){
            console.log(resp)
          })
          .catch(function (error){
            console.log(error)
          })
    }
    ,
    deleteById(row){
      this.$alert('不准删', 'error', {
        confirmButtonText: '知道了',
        callback: action => {
          this.$message({
            type: 'info',
            message: '别急,让我再研究研究',
            center:true
          });
        }
      });
    }
  },
  data(){
    return {
      input:'',
      getflag:2,
      flag:'',
      kindDatas:[{
        kindId:'',
        kindName:'',
        kindFlag:''
      }]
    }
  },
  created() {
    const _this=this;
    _this.kindDatas=[];
    axios.get('http://localhost:9090/kind/findAll/2').then(function (resp){
      let jsonObj = JSON.parse(JSON.stringify(resp.data));
      _this.kindDatas=resp.data;
    })
  }
}
</script>

<style scoped>

</style>